.box1{
    .box2{
        background-color: aliceblue;
    }

    >.box3{
        background-color: aquamarine;
    }

    &:hover{
        background-color: black;
    }

    div &{
        width: 100px;
    }
}

.p1{
    width: 100px;
    height: 200px;
}

// :extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}

.p3{
    // 直接对在指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    // mixin 混合
    .p1();
}

.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}

.text(@w){
    width: @w;
    height: 100px;
    border: 1px solid red;
}

div {
    .text(200px);
}

.text1(@w, @h, @bg-color)
{
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}

div{
    // .text1(@w:200px, @h:200px, @bg-color:orange);
    .text1(200px, 100px, red);
}